<template>
  <div class="app">
    <div class="nav">
      <router-link :to="{ name: 'User' }">
        <van-icon
          name="arrow-left"
          size="20px"
          color="#000"
          @click-left="onClickLeft"
        />
      </router-link>
      <span @click-right="onClickRight">帮助</span>
    </div>
    <div class="container">
      <van-uploader v-model="imgs" :after-read="afterRead" />
      <div>
        <h2>修改昵称</h2>
        <p>
          昵称：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" v-model="nickName" />
        </p>
        <h2>修改密码</h2>
        <p>旧密码：<input type="text" v-model="opsw" /></p>
        <p>新密码：<input type="text" v-model="npsw" /></p>
      </div>

      <van-button @click="saveHandle">保存</van-button>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { changeInfo } from "../../api/user";
import { changePwd } from "../../api/user";
export default {
  components: {},
  data() {
    return {
      avatar: "",
      nickName: "",
      opsw: "",
      npsw: "",
      imgs: [],
    };
  },
  computed: {},
  watch: {},
  created() {
    console.log(this.$route.params);
    this.nickName = this.$route.params.nickName;
    this.avatar = this.$route.params.avatar;
    this.opsw = this.$route.params.password;
  },
  methods: {
    async afterRead(file) {
      console.log(file);
      const res = await changeInfo({
        avatar: file.content,
      });
      console.log(res);
      this.avatar = file.content;
    },
    async saveHandle() {
      await changeInfo({
        nickName: this.nickName,
        avatar: this.avatar,
      });
      await changePwd({
        oldPassword: this.opsw,
        password: this.npsw,
      });
      this.$router.push({
        name: "User",
      });
    },
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
  },
};
</script>
<style scoped>
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 10px 10px;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.van-uploader {
  margin-top: 3rem;
}
h2 {
  font-size: 20px;
  font-weight: 900;
  margin: 10px 0;
}
input {
  border: 0;
  height: 50px;
  border-radius: 15px;
  background-color: rgb(241, 241, 241);
  color: grey;
  margin: 10px 0;
  width: 100%;
}
.van-button {
  margin-top: 50px;
  border: 0;
  background-color: #fd6c03;
  color: #fff;
  width: 70%;
  border-radius: 25px;
}
</style>
